<template>
    <div class="title">
        <NavTop title="网易严选"></NavTop>
    </div>
    <van-tabs @click-tab="topClick" title-active-color="red" swipeable color="red">
        <van-tab v-for="item in topNav" :title="item.name">
        </van-tab>
    </van-tabs>
    <div class="box"></div>
    <div class="content">
        <header class="hd">
            <p class="desc">
                {{ topName }}
            </p>
        </header>
        <div class="banner">
            <ul class="concentration_box">
                <li class="concentration_item" v-for="item in detailList" :key="item.id">
                    <router-link to="/Detail">
                        <img class="big_img" :src="item.listPicUrl" alt="">
                        <div class=" concentration_title"><img class=" sml_img"
                                src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                                class="title">{{ item.name }}</span></div>
                        <div class="concentration_price">
                            <span class="currentprice">¥ {{ item.retailPrice }}</span>
                            <span class="originalcost">¥{{ item.sortOriginPrice }}</span>
                        </div>
                        <div class="bigbox">
                            <div class="smlbox">限时购</div>距结束1天
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
    <BackTopTo></BackTopTo>
</template>

<script setup lang="ts">
import { getClassDetail } from '../../../api/calssList'
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
//声明对象储存三个参数
const detailId = ref<{
    superCategoryId: string,
    id: string,
    showIndex: string
}>()
//获取路由参数
const route = useRoute()
//详情列表初始数据
const detailList = ref<any[]>([])
const detailNewList = ref<any[]>([])
//声明变量保存顶部分页
const topNav = ref<any[]>([])
//声明变量保存上边字段
const topName = ref<string>('')
//点击上部导航
const topClick = (ev: any) => {
    let title = ev.title.split('')

    detailList.value = detailNewList.value.filter(e => {
        return title.some((es: any) => {
            return e.name.includes(es) == true
        })
    })


}
//详情列表功能函数
const getDetailList = async (superCategoryId: string, id: string, showIndex: string) => {
    try {
        let res = await getClassDetail(superCategoryId, id, showIndex)
        // console.log(res);
        detailList.value = res.data.categoryItems.itemList
        detailNewList.value = res.data.categoryItems.itemList
        topNav.value = res.data.categoryL2List

        topName.value = res.data.categoryItems.category.frontName
    } catch (error) {
        console.log("获取分类详情数据失败");

        console.log(error);
    }
}
onMounted(() => {
    console.log(route.params);
    let { superCategoryId, id, showIndex } = route.params
    console.log(superCategoryId, id, showIndex);
    // detailId.value = {superCategoryId:superCategoryId as string,id:id as string,showIndex:showIndex as string}
    getDetailList(superCategoryId as string, id as string, showIndex as string)

})
</script>

<style lang="less">
/* 横向flex布局 */
.flex {
    display: flex;
}

/* 纵向flex布局 */
.flex_c {
    display: flex;
    flex-direction: column;
}

//banner
.content {
    .hd {
        .desc {
            text-align: center;
            font-size: 14px;
        }
    }

    .banner {

        padding: 0 10px;

        h3 {
            font-size: 26px;
        }

        .concentration_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .concentration_item {
                width: 172.5px;

                .big_img {
                    width: 100%;
                }

                // width: 331px;
                .concentration_title {

                    margin-top: 0.12rem;
                    line-height: .4rem;
                    text-align: left;
                    font-size: .28rem;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: #12161c;
                    font-family: PingFangSC-Regular;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    word-break: break-all;

                    .sml_img {

                        margin-right: 0.1rem;
                        vertical-align: -3PX;
                        height: 15px;
                    }


                }

                .concentration_price {
                    height: 30px;

                    .currentprice {
                        font-size: 16px;
                        color: red;
                        margin-right: 10px;
                    }

                    .originalcost {
                        font-size: 12px;
                        text-decoration: line-through;
                        color: #999b9d;
                    }
                }

                .bigbox {
                    width: 100%;
                    height: 23px;
                    display: flex;
                    background: #ffe9eb;
                    font-size: 12px;
                    line-height: 23px;
                    border-radius: 10px;
                    color: red;
                    font-weight: bold;
                    margin-top: 10px;

                    .smlbox {
                        background: red;
                        border-radius: 10px;
                        margin-right: 10px;
                        color: #eee;
                        font-weight: bold;
                        padding: 0 5px;
                    }
                }
            }
        }


    }
}

.box {
    width: 100%;
    height: 10px;
    background: #eee;
}
</style>